<template>
  <el-empty v-if="pageTotal === 0" description="抱歉没有找到相关的评论" />
  <template v-else>
    <el-table :data="commentList" style="width: 100%">
      <el-table-column prop="commentId" label="评论编号" width="180" />
      <el-table-column prop="commentContent" label="评论内容" width="800" />
      <el-table-column label="发表时间" width="180">
        <template #default="scope">
          <el-text>{{ formatterDate(scope.row.createTime) }}</el-text>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="success" @click="toDetail(scope.row.plantId)">前往对应作品</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageBlock">
      <el-pagination v-model:current-page="commentUserParam.currentPage" v-model:page-size="commentUserParam.pageSize"
        :page-sizes="[15, 25, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </template>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useUserCommentApi } from '@/api/comment/comment';
import { usePlantDetailApi } from '@/api/plant/plant';
import { useRouter } from 'vue-router';
import store from '@/stores';

const router = useRouter()

const commentUserParam = reactive({
  userId: store.useUserStore.user.userId,
  currentPage: 1,
  pageSize: 15
})

const pageTotal = ref(0)
const commentList = ref()

const query = async () => {
  const { data, total } = await useUserCommentApi(commentUserParam)
  pageTotal.value = total
  commentList.value = data
}

function handleSizeChange() {
  query()
}
function handleCurrentChange() {
  query()
}

onMounted(() => {
  query()
})

const toDetail = (plantId: any) => {
  router.push({ name: 'detail', params: { id: plantId } })
}


const formatterDate = (val: string) => {
  let newDateObj = new Date(val)
  let year = newDateObj.getFullYear()
  let month: string | number = newDateObj.getMonth() + 1
  let day: string | number = newDateObj.getDate()
  let hh: string | number = newDateObj.getHours()
  let mm: string | number = newDateObj.getMinutes()
  let ss: string | number = newDateObj.getSeconds()
  month = month > 9 ? month : '0' + month
  day = day > 9 ? day : '0' + day
  hh = hh > 9 ? hh : '0' + hh
  mm = mm > 9 ? mm : '0' + mm
  ss = ss > 9 ? ss : '0' + ss
  return `${year}/${month}/${day} ${hh}:${mm}:${ss}`
}

</script>

<style scoped lang="scss">
.pageBlock {
  text-align: center;
  margin-top: 20px;
  margin-left: 530px;
}

.el-table {
  :deep(.success-row) {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
  }
}
</style>